<template>
    <div class="remindIndex">
      <userHeader />
      <div class="breadClum">
      <span>
            <router-link :to="{path:'/pageIndex'}"><a class="bread1">当前位置：首页  >  </a></router-link>
            <a class="bread2">消息提醒 </a>
      </span>
      </div>
      <div class="navList">
          <span class="sp1">所有提醒</span>
          <span class="sp1">未读提醒</span>
      </div>
      <el-table
        :data="tableData3"
        stripe
        class="el-table"
        ref="dataListTable"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          label=""
          prop="ID"
          width="63">
          <template slot-scope="scope">
            <el-checkbox></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="current_time"
          label="发布日期"
          width="150"
          >
          <template slot-scope="scope">
           {{ editorStart_time(scope.row.current_time)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="mess_state_text"
          label="状态"
          width="83">
        </el-table-column>
        <el-table-column
          prop="mess_content"
          label="提醒内容"
          width="305">
          <template slot-scope="scope">
            {{scope.row.mess_content}}
          </template>
        </el-table-column>
        <el-table-column
          prop="mess_type_text"
          label="提醒类型"
          width="230">
        </el-table-column>
        <el-table-column
          prop="job"
          label="操作"
          width="204">
          <template slot-scope="scope">
            <p v-if="scope.row.mess_type==2||scope.row.mess_type==1||scope.row.mess_type==3||scope.row.mess_type==13||scope.row.mess_type==15||scope.row.mess_type==16||scope.row.mess_type==12">
              <router-link :to="{path:scope.row.mess_link,query:{mess_id:scope.row.mess_id,mess_link:scope.row.mess_link}}">
                查看
              </router-link>
            </p>
            <p v-if="scope.row.mess_type==10||scope.row.mess_type==11||scope.row.mess_type==9||scope.row.mess_type==14">
              <router-link :to="{path:scope.row.mess_link,query:{mess_id:scope.row.mess_id}}">
                查看
              </router-link>
            </p>
            <p v-else-if="scope.row.mess_type==20||scope.row.mess_type==6">
              <router-link :to="{path:scope.row.mess_link}">
                查看
              </router-link>
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="blank"
          label=""
          width="auto">
        </el-table-column>
      </el-table>
      <!--<div class="e-table-footer">-->
        <!--<div class="e-selectAll">-->
          <!--<el-checkbox @change="selectAll" v-model="selectAllValue"></el-checkbox>-->
        <!--</div>-->
        <!--<div class="e-selectText">-->
          <!--<span class="e-del" @click.stop="deleteBtn">删除</span>-->
        <!--</div>-->
      <!--</div>-->
      <div class="pagenationIndex">
        <el-pagination
          :page-count=pageSize
          layout="total,prev, pager, next"
          :current-page.sync="currentPage"
          @current-change="currentChange"
          :total="total"
          >
        </el-pagination>
      </div>
    </div>
</template>

<script>
  var mdSecret ='fangyou968123456'
  import {strToHexCharCode,toFixedBit,dec2hex,formatTime,formatDateTime,formatDateTimeSecond } from  '@/utils/index.js'
  import userHeader from '@/components/header.vue'
  import fixed from '@/components/fixed.vue'
  import paganition from '@/components/paganition.vue'
  export default({
    data(){
        return {
          pageSize:1,
          total:0,
          page:'1',
          currentPage:1,
          tableData3:[],
          selectAllValue:false,
          multipleSelection:[],
          userDataStr:""

        }
    },
    components:{
      userHeader,
      paganition
    },
    computed:{
      editorStart_time(){
        return function (selectTypeArray) {
          return formatDateTimeSecond(selectTypeArray)
        }
      }
    },
    methods:{
      deleteBtn(){
        for(var i in this.multipleSelection){
          if(i==this.multipleSelection.length-1||this.multipleSelection.length==1){
            this.userDataStr+=this.multipleSelection[i].user_id;
          }else{
            this.userDataStr+=this.multipleSelection[i].user_id+','
          }
        };
        let that =this;
        console.log(this.userDataStr);
      },
      selectAll(){
          console.log(this.$refs.dataListTable)
          this.$refs.dataListTable.toggleAllSelection();
      },
      handleSelectionChange(val){
        console.log(val)
        console.log(this.tableData3)
        console.log(val.length != this.tableData3.length)
        if(val.length != this.tableData3.length){
          this.selectAllValue = false
        }else {
          this.selectAllValue = true
        }
        this.multipleSelection =val;
      },
      initData(page){
        this.axios.get('/api/v1/accout/usermessage',
          {
            params:{
              limit:10,
              page:page
          }
          }).then((res)=>{
          console.log(res.data.code)
          if(res.data.code==0){
              console.log(res.data)
              this.tableData3 =res.data.data
              this.total = res.data.pagination.total
              this.pageSize =res.data.pagination.pages
              this.currentPage=res.data.pagination.page

          }

        })
      },
      //分页状态改变
      currentChange(val){
        this.page =val
        this.initData( this.page)
      },
    },
    mounted(){
        this.initData(this.page)
    }
  })
</script>
<style scoped>
  .remindIndex{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
 .remindIndex .el-table  >>>  th.is-leaf{
    background: #d3e9bb;
    height:58px;
  }
 .remindIndex  .el-table  >>> thead  th.is-leaf .cell{
    font-size: 18px;
    color: #5d9120;
    font-weight: normal;
    text-align: center;
  }
 .remindIndex  .el-table  >>> tr  th.is-leaf{
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
 .remindIndex  .el-table >>> .el-table__body-wrapper   .el-table__body tr{
    border-bottom: 1px solid #aac983;
  }
 .remindIndex  .el-table  >>> .el-table__body-wrapper  .el-table__body  .el-table__row .cell{
    text-align: center;
  }
 .remindIndex  .el-table >>> .el-table__body-wrapper   .el-table__body  .el-table__row td{
    height: 50px;
    /*border-bottom: 1px solid #aac983;*/
    border-right: 1px solid #aac983;
  }
 .remindIndex .el-table >>> .el-table__body-wrapper   .el-table__body tr{
    border-bottom: 1px solid #aac983;
  }
  .remindIndex  .el-table >>> .el-table__body-wrapper   .el-table__body  .el-table__row td a{
    color: #606266;
  }

  .remindIndex  .e-table-footer{
    background: #d3e9bb;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
  .remindIndex  .e-table-footer  .e-selectAll{
    width: 64px;
    text-align: center;
    border-left: 1px solid #aac983;
    border-right: 1px solid #aac983;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
  }
  .remindIndex .e-table-footer .e-selectText{
    display: inline-block;
    margin-left: 20px;
    color: #5d9120;
  }
  @media screen and (max-width: 1400px){
    .remindIndex{
      padding: 6px;
    }
  }
</style>
